<template>
	<div class="page">
		<div class="chart-demo">
			<sw-station-list v-for="item, index in stationList" :station="item" v-show="index < showNum"
				:key="item.name"></sw-station-list>
		</div>
	</div>
</template>

<script>
import swStationList from './components/sw-station-list.vue';

export default {
	name: "camera_page",
	components: { swStationList },
	data() {
		return {
			// 是否开启全屏
			isFull: false,
			// 能显示多少
			showNum: 1,
			// 起始索引
			startIndex: 0,
			// 循环间隔
			step: 5000,
			// 是否开启了全屏
			isFullscreen: false,
			// 循环函数
			interval: null,
			// 台站列表
			stationListAll: [
				{
					name: '新疆机房1山东辽宁',
					roomNum: 3,
					stationListAll: [
						{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},
					]
				},
				{
					name: '新疆机房2',
					roomNum: 4,
					stationListAll: [
						{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},
					]
				},
				{
					name: '新疆机房3',
					roomNum: 6,
					stationListAll: [
						{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},
					]
				},

			],
		};
	},
	watch: {
		// 存在全屏的视频则停止滚动
		isFullscreen(val) {
			if (val) {
				if (this.interval) clearInterval(this.interval);
			} else {
				this.start()
			}
		}
	},

	computed: {
		stationList() {
			let startList = [];
			let endList = []
			if (this.stationListAll && this.stationListAll.length > 0) {
				for (let i in this.stationListAll) {
					if (i < this.startIndex) {
						endList.push(this.stationListAll[i])
					} else {
						startList.push(this.stationListAll[i])
					}
				}
			}
			let list = startList.concat(endList);
			return list.splice(0, this.showNum + 1) || [];
		}
	},
	created() {
		document.title = '台站总览';
		this.init();
		// 适配分辨率
		window.addEventListener('resize', () => this.init())
	},
	mounted() {
		this.$nextTick(() => {
			try {
				// this.start()
			} catch (e) { console.log('计算出错', this.id) }

		})
	},
	methods: {
		init() {
			// 10rem
			let innerWidth = window.innerWidth;
			let innerHeight = window.innerHeight;
			let domH = 10.5; // 每行高度为20.5rem
			let rem = (innerWidth / 1920) * 20;
			let domHeight = rem * domH;
			let titleHeight = rem * 4.3;
			let heith = innerHeight - titleHeight
			this.showNum = Math.round(heith / domHeight);
			this.start()
		},
		// 开始循环
		start() {
			if (this.interval) clearInterval(this.interval);
			if (this.showNum < this.stationListAll.length) {
				this.interval = setInterval(() => {
					if (this.stationListAll && this.stationListAll.length > 0) {
						if (this.startIndex < this.stationListAll.length - 1) {
							this.startIndex++
						} else {
							this.startIndex = 0
						}
					}
				}, this.step)
			}
		},
		// 是否开启了全屏
		fullscreenChange(isFullscreen) {
			this.isFullscreen = isFullscreen;
		},
	},
	beforeDestroy() {
		// 关闭循环
		clearInterval(this.interval)
		window.removeEventListener('resize', () => this.init())
	}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import './css/hard.css';
@import './css/elasticity.css';
@import './css/index.css';
</style>
